<template>
  <div ref="info" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <el-row v-if="showInfo" class="top_cus_info">
        <el-col :span="18">
          <el-col :span="8">
            <p>会员昵称</p>
            <p>{{ initData.nickName }}</p>
          </el-col>
          <el-col :span="8">
            <p>真实姓名</p>
            <p>{{ initData.fullName }}</p>
          </el-col>
          <el-col :span="8">
            <p>账号类型</p>
            <p>{{ getType(initData.type) }}</p>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button v-if="accreditChildren.editorOperator" type="primary" @click="jumpId">编 辑</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="height3" />
    <div v-if="showInfo" class="padding20">
      <el-tabs v-model="activeName">
        <el-tab-pane label="会员详情" name="first">
          <div class="infoBox">
            <el-col :span="12">会员昵称：{{ initData.nickName ?initData.nickName :'暂未设置会员昵称' }}</el-col>
            <el-col :span="12">真实姓名：{{ initData.fullName?initData.fullName :'暂未设置真实姓名' }}</el-col>
            <el-col :span="12">账号类型：{{ getType(initData.type) }}</el-col>
            <el-col :span="12">身份证号：{{ initData.idNumber?initData.idNumber :'暂未设置身份证号' }}</el-col>
            <el-col :span="12">会员分类：{{ getGrouping(initData.grouping) }}</el-col>
            <el-col :span="12">手机号码：{{ initData.phone?initData.phone :'暂未设置手机号码' }}</el-col>
            <el-col :span="12">职务：{{ initData.job?initData.job :'暂未设置职务' }}</el-col>
            <el-col :span="12">公司：{{ initData.company?initData.company :'暂未设置公司' }}</el-col>
            <el-col :span="12">邮箱：{{ initData.email?initData.email :'暂未设置邮箱' }}</el-col>
            <el-col :span="12">生日：{{ initData.birthday?initData.birthday :'暂未设置生日' }}</el-col>
            <el-col :span="12">性别：{{ Number(initData.sex) === 0 ? "男" : "女" }}</el-col>
            <el-col :span="12">是否分配会员：{{ initData.accept === true ? '是' : "否" }}</el-col>
            <el-col :span="12">项目负责人 ：{{ initData.projectLeader === true ? '是' : "否" }}</el-col>
            <el-col
              :span="12"
            >客户所在地：{{ getProvince(initData.province) }}{{ getCity(initData.city) }}{{ getCount(initData.county) }}</el-col>
          </div>
        </el-tab-pane>
        <el-tab-pane label="会员头像" name="seconed">
          <el-col :span="24">
            <img :src="initData.headPortrait" alt >
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <el-row v-loading="loading" class="padding20"></el-row> -->
  </div>
</template>
<script>
import mmUrl from '~/utils/utilUrl';
import { createDics } from '~/utils/util';
export default {
  props: ['id', 'pageHeight', 'updateRight', 'accreditChildren'],
  data() {
    return {
      showInfo: false,
      loading: true,
      areas: [],
      activeName: 'first',
      initData: {
        advertisingType: '',
        applicationRange: '',
        automaticId: 0,
        dataId: '',
        endTime: '',
        label: '',
        layoutPosition: '',
        remark: '',
        sort: 0,
        startTime: '',
        status: false,
        tittle: '',
        CEtimer: []
      },
      photo: '',
      resultDics: {},
      advertisingTypeArr: [
        {
          value: 0,
          label: '商机'
        },
        {
          value: 1,
          label: '直播'
        },
        {
          value: 2,
          label: '课程'
        }
      ],
      typeOptions: [
        {
          value: 0,
          label: '投资人',
          disabled: true
        },
        {
          label: '投资顾问',
          value: 1
        },
        {
          label: '公司账户',
          value: 2
        },
        {
          label: '运营账户',
          value: 3
        }
      ]
    }
  },
  watch: {
    id() {
      this.getInitData()
    },
    updateRight() {
      this.getInitData()
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    getCount(res) {
      return this.areas.countys.some(v => v.areaCode === res)
        ? '-' + this.areas.countys.filter(v => v.areaCode === res)[0].areaName
        : '';
    },
    getCity(res) {
      return this.areas.citys.some(v => v.areaCode === res)
        ? '-' + this.areas.citys.filter(v => v.areaCode === res)[0].areaName
        : '';
    },
    getProvince(res) {
      return this.areas.provinces.some(v => v.areaCode === res)
        ? this.areas.provinces.filter(v => v.areaCode === res)[0].areaName
        : '';
    },
    getGrouping(res) {
      return this.resultDics.MEMBER_LEVEL.children.some(v => v.dicCode === res)
        ? this.resultDics.MEMBER_LEVEL.children.filter(
          v => v.dicCode === res
        )[0].dicName
        : '暂未设置会员分类';
    },
    getType(res) {
      return this.typeOptions.some(v => v.value === res)
        ? this.typeOptions.filter(v => v.value === res)[0].label
        : '暂未设置账号类型';
    },
    clearJumpId() {
      this.$emit('clearJumpId')
    },
    jumpId() {
      this.$emit('editor')
    },
    getInitData() {
      this.$post({
        url: mmUrl.member.loadEdit,
        data: {
          id: this.$props.id
        }
      }).then(res => {
        this.initData = res.item
        this.$set(this.initData, 'accept', res.accept)
        this.$set(this.initData, 'projectLeader', res.projectLeader)
        this.resultDics = res.dicsMap
        this.areas = res.areas
        this.loading = false
        this.showInfo = true
        this.$nextTick(() => {
          this.$refs['info']
            ? (this.$refs['info'].style.height = this.$props.pageHeight + 'px')
            : '';
        })
      })
    },
    getFilePhtot(res) {
      this.$post({
        url: mmUrl.file.getfiles,
        data: {
          dataId: this.$props.id,
          typeCode: res
        }
      }).then(res => {
        this.photo = res.length ? res[0].fileUrl : '';
      })
    }
  }
}
</script>

<style lang='scss'>
.infoBox {
  font-weight: 500;
  font-size: 14px;
  div {
    min-height: 50px;
  }
}
img {
  vertical-align: top;
  max-width: 480;
  max-height: 360px;
}
</style>
